import React, { createContext, useState } from 'react';
import { ActivityIndicator, Alert, Button, Dimensions, Platform, SafeAreaView, StatusBar, StyleSheet, Switch, Text, TextInput, View } from 'react-native';

//输入框练习
const TextInputPage = () => {

    const [userName, setUserName] = useState('')
    const [password, setPassword] = useState('')
    const [desc, setDesc] = useState('')

    const doLogin = () => {
        Alert.alert(userName)
    }

    return (
        <View style={[styles.root]}>

            <TextInput
                style={styles.textinput}
                placeholder='请输入手机号'
                keyboardType="number-pad"
                value={userName}
                onChangeText={(val) => {
                    setUserName(val)
                }}
            />

            <TextInput
                style={styles.textinput}
                placeholder='请输入密码'
                value={password}
                secureTextEntry={true}
                onChangeText={(val) => {
                    setPassword(val)
                }}
            />

            <TextInput
                style={styles.desc}
                placeholder='请输入简介'
                keyboardType='ascii-capable'
                value={desc}
                multiline={true}        //可以输入多行文字
                numberOfLines={20}      //配套使用
                textAlignVertical='top'
                onChangeText={(val) => {
                    setDesc(val)
                }}
            />

            <View style={styles.button}>
                <Button
                    title='登录'
                    onPress={() => {
                        doLogin()
                    }}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
        alignItems: "center",
        height: Dimensions.get('window').height,
    },
    button: {
        marginTop: 30,
        width: Dimensions.get('window').width - 40
    },
    textinput: {
        width: Dimensions.get('window').width - 40,
        height: 50,
        borderColor: "#999999",
        borderWidth: 1,
        paddingHorizontal: 12,
        borderRadius: 10,
        marginTop: 10
    },
    desc: {
        width: Dimensions.get('window').width - 40,
        borderColor: "#999999",
        borderWidth: 1,
        paddingHorizontal: 12,
        borderRadius: 10,
        marginTop: 10,
        height: 120
    }
})

export default TextInputPage;
